import React from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '@/hooks/useTheme';

interface ThemeToggleProps {
  compact?: boolean;
}

export default function ThemeToggle({ compact = false }: ThemeToggleProps) {
  const { mode, setMode, colors } = useTheme();

  const toggleTheme = () => {
    if (mode === 'light') setMode('dark');
    else if (mode === 'dark') setMode('system');
    else setMode('light');
  };

  const getIcon = () => {
    switch (mode) {
      case 'light':
        return 'sunny-outline';
      case 'dark':
        return 'moon-outline';
      default:
        return 'contrast-outline';
    }
  };

  const getLabel = () => {
    switch (mode) {
      case 'light':
        return '浅色模式';
      case 'dark':
        return '深色模式';
      default:
        return '跟随系统';
    }
  };

  if (compact) {
    return (
      <Pressable
        style={({ pressed }) => [
          styles.compactButton,
          { backgroundColor: pressed ? colors.border : 'transparent' }
        ]}
        onPress={toggleTheme}
      >
        <Ionicons name={getIcon()} size={22} color={colors.text} />
      </Pressable>
    );
  }

  return (
    <Pressable
      style={({ pressed }) => [
        styles.container,
        {
          backgroundColor: pressed ? colors.border : colors.card,
          borderColor: colors.border
        }
      ]}
      onPress={toggleTheme}
    >
      <Ionicons name={getIcon()} size={20} color={colors.text} style={styles.icon} />
      <Text style={[styles.text, { color: colors.text }]}>{getLabel()}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    borderRadius: 8,
    borderWidth: 1,
  },
  compactButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    marginRight: 8,
  },
  text: {
    fontSize: 14,
    fontWeight: '500',
  },
});